<template>
  <div :class="['goodsDetail',{scrollForbidden:showModal==true}]">
    <!-- 头部 -->
    <swiper1 :imgList="imgList"></swiper1>
    <div class="name_wrapper">
      <div class="name">
        {{goodsDetail.name}}
      </div>
      <div class="desc">
        <div class="price">
          ￥<span class="s-price">{{goodsDetail.s_price}}</span>
        </div>
        <div class="bottom">
          <div class="m-price">￥{{goodsDetail.m_price}}</div>
          <div class="sale">销量： {{goodsDetail.sale_count}}件</div>
        </div>
        <!-- <span>原价￥{{goodsDetail.m_price}}</span> -->
      </div>
    </div>
    <!-- 头部结束 -->
    <div class="service">
      <div class="service-item" v-for="item in goodsDetail.goods_service_label_list" :key="item">
        <img src="../../../static/images/goodsDetails/gou.png" />
        <span>{{item}}</span>
      </div>
    </div>


    <!-- 规格等详情 -->
    <div class="goods_desc">
      <div>
        <div class="goods_desc_item" @click="showCart">
          <span>选择规格</span>
          <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
        </div>
        <!-- 规格等详情结束 -->

        <div class="desc-nav">
          <div class="nav-item" @click="isShow(1)">
            <span :class="{'active':is_show==1}">商品详情</span>
          </div>
          <div class="nav-item" @click="isShow(2)">
            <span :class="{'active':is_show==2}">评价</span>
          </div>
        </div>

        <!-- 评论列 -->
        <div class="comment" v-if="is_show==2">
          <div class="comment_btn">
            <div class="comment_btn_all" :class="{'comment-active':is_img==''}" @click="getComment()">所有评价({{commentList.total_comment_num}})</div>
            <div class="comment_btn_pic" :class="{'comment-active':is_img==1}" @click="getComment(1)">有图评价({{commentList.have_img_comment_num}})</div>
          </div>

          <div class="comment_item" v-for="(value,index) in commentList.data" v-show="index<5" :key="index">
            <div class="comment_item_top">
              <div class="comment_item_img">
                <img :src="value.user_info.photo_url" />
              </div>
              <div class="comment_item_nick">{{value.user_info.nickname}}</div>
            </div>
            <div class="comment_item_content">{{value.content}}</div>
            <div class="comment_item_pic">
              <img :src="value1" mode="aspectFill" v-for="(value1,index1) in value.comment_img" @click="previewImage(value1,value.comment_img)" :key="index1">
            </div>
            <div class="comment_item_time">{{value.created_at}}</div>
          </div>
        </div>
        <!-- 评论列结束 -->
      </div>

       <!-- 商品介绍 -->
        <div class="goods_introduce" v-if="is_show==1">
          <div class="content">
            <div v-html="goodsDetail.detail"></div>
          </div>
          <!-- <div>海外品暂不支持7天无理由退换，介意请慎拍，谢谢！</div> -->
<!--          <img :src="value" alt="" v-for="(value,index) in goodsDetail.detail" @click="previewImage(value, goodsDetail.detailed_description)" :key="index" mode="widthFix">-->
        </div>
        <!-- 商品介绍结束 -->

        <!-- 底部购物栏 -->
        <div class="cartBar">
          <div class="cartBar_left" v-if="!credit">
            <button class="cartBar_left_item" open-type="contact">
              <img src="../../../static/images/goodsDetails/kefu.png" alt="">
              <div>客服</div>
            </button>
<!--             <div class="cartBar_left_item">
              <img src="../../../static/images/goodsDetails/collect.png" alt="">
              <! <img src="../../../static/images/goodsDetails/collect_active.png" alt=""> -->
              <!-- <div>收藏</div>
            </div> --> 
            <div class="cartBar_left_item cartIcon_wrapper" @click="toCart">
              <img src="../../../static/images/goodsDetails/caret.png" alt="">
              <div>购物车</div>
              <div class="cartIcon" v-show="cartListNum!='0' &&cartListNum">{{cartListNum}}</div>
            </div>
          </div>
          <div class="cartBar_right" v-if="!credit">
            <div @click="showCart">加入购物车</div>
            <div @click="buy">立即购买</div>
          </div>
          <div class="cartBar_right" v-if="credit">
            <div @click="buy">立即兑换</div>
          </div>
        </div>
        <!-- 底部购物栏结束 -->

        <!-- 弹出层 -->
        <div class="mask"  v-if="showModal" @click="hideCart"></div>
        <div class="modalDlg" v-if="showModal">
          <div class="modalDlg_top">
            <img :src="goodsDetail.thumb_url" alt="">
            <div class="modalDlg_top_right">
              <div class="modalDlg_top_right_name">
                <!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
                <span>{{goodsDetail.name}}</span>
              </div>
              <div class="cart_price">
                <span v-if="credit">{{goodsDetail.exchange_integral}}积分</span>
                <span v-else>￥{{goodsDetail.s_price}}</span>
                <span>库存：{{goodsDetail.stock}}</span>
              </div>
            </div>
          </div>
          <div class="modalDlo_center">
            <div class="modalDlo_center_tit" v-if="goodsDetail.goods_spu_info.length!=0">规格</div>
            <div class="modalDlo_center_classify">
              <div
                v-for="(item,index) of goodsDetail.goods_spu_info"
                 :key="index" @click="select_classify(item,index)"
                 :class="{selectClassify:index==classifyIndex}"
                 >
                 {{item.spu_name}}
                </div>
            </div>
          </div>
          <div class="modalDlo_bottom">  
           <count @numberChange="numberChange" :stock="goodsDetail.stock"><div>购买数量</div></count>
          </div>
          <div class="join_cart" v-if="!buyNow" @click="addCart">加入购物车</div>
          <div class="join_cart" v-else @click="buying">立即购买</div>
        </div>
        <!-- 弹出层结束 -->
    </div>
  </div>
</template>

<script>
import swiper1 from '@/components/swiper'
import count from '@/components/count'
import { setTimeout } from 'timers';
export default {
  name:'goodsDetail',
  components:{
    swiper1,
    count
  },
  data(){
    return{
      id:'',//商品id
      goodsDetail:'',//商品信息
      showModal: false,//显示弹出层
      buyNow:false,//显示加入购物车还是立即购买按钮
      is_show: 2,
      num:1,//购买商品数量
      cartListNum:'',//购物车数量
      commentList:"",   //评论内容
      imgList:'',
      credit:'',//credit为来自积分商城的跳转
      classifyIndex:-1,//规格索引
      classifyId:'',//规格id
      page: 0,
      is_img: '',
    }
  },
  onLoad(options){
    this.credit=options.from;
    this.id=options.id;
    this.getGoodsDetails(this.id)
    this.getCartList()
    this.getComment()
  },
  watch:{
    goodsDetail(nval){
      if(nval.goods_banner.length!=0){
        this.imgList=nval.goods_banner
      }else{
        this.imgList=[nval.thumb_url]
      }
    }
  },
  methods: {
    isShow(index){
      this.is_show = index;
    },
    previewImage(value,value1){
      this.$currency.previewImage(value,value1)
    },
    showCart() { //显示加入购物车
        this.num=1;//清除规格数量
        this.showModal=true
        this.buyNow=false
    },
    buy(){//显示立即购买
      this.num=1;//清除规格数量
      this.showModal=true
      this.buyNow=true
    },
    async buying(){   //点击弹窗的立即购买
      if(this.num<=0){
        this.$currency.showToast('购买数量不能为0');
        return
      }else if(this.classifyId=='' &&this.credit!='credit'){
        this.$currency.showToast('先选择规格吧');
        return
      }
     let res=await this.$request.postData('/order/submitOrder',{type:'',goods_id:this.id,num:this.num,goods_spu_id:this.classifyId})
     if(res.data.level=='success'){
       this.$store.dispatch('setOrder',res.data.data)
       if(this.credit=='credit'){
         this.$currency.navigateTo(`/pages/orderConfirm/main?from=credit`)
       }else{
         this.$currency.navigateTo(`/pages/orderConfirm/main`)
       }
      
     }else{
       this.$currency.showToast(res.data.message)
     }
      
    },
    hideCart() { 
        this.showModal=false
    },
    async getGoodsDetails(id){
      let res=await this.$request.getData('/goods/getGoodsDetails',{goods_id:id})
      if(res.data.level=='success'){
        let str = res.data.data;
        if (str.detail!=null){
          str.detail = str.detail.replace(/<img[^>]*>/gi, function (match, capture) {
            return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
          });
          str.detail = str.detail.replace(/\<img/gi, '<img style="max-width:100%;height:auto;vertical-align: top;" ');
        }
        this.goodsDetail=str
      }
    },
    numberChange(num){
        this.num=num
    },
    async addCart(){//添加到购物车
    const _this=this
      if(this.num<=0){
        this.$currency.showToast('购买数量不能为0');
        return
      }else if(this.classifyId==''){
        this.$currency.showToast('先选择规格吧');
        return
      }
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/goods/addShopCart',{goods_id:this.id,num:this.num,user_token:userToken,goods_spu_id:this.classifyId})
      wx.showLoading()
      if(res.data.level=='success'){
        this.$currency.showToast('成功加入购物车','success',1500);
        this.showModal=false;
        wx.hideLoading();
        this.getCartList()

      }else{
        wx.hideLoading({success:function(){
          _this.$currency.showToast(res.data.message,'none',1500)
        }});
        
      }
    },
    async getCartList(){
      let userToken=wx.getStorageSync('userToken');
      if(userToken){
        let res=await this.$request.getData('/goods/getShopCart',{user_token:userToken});
        if(res.data.level=='success'){
          this.cartListNum=res.data.data.length
        }
      }
      
    },
    async getComment(is_img){
      this.is_img = is_img||'';
      let res=await this.$request.getData('/goods/getUserComment',{
        goods_id:this.id,
        limit:10,
        page:this.page,
        is_img:is_img||''
      })
      this.commentList=res.data
    },
    select_classify(item,index){//选择规格
      this.classifyIndex=index
      this.classifyId=item.id
      this.$set(this.goodsDetail,'stock',item.stock)
      this.$set(this.goodsDetail,'s_price',item.price)
    },
    toCart(){
      wx.switchTab({url:'/pages/cart/main'})
    },
    toGoodsIntroduce(value,tag){
      wx.navigateTo({url:`/pages/goodsDetailIntroduce/main?tag=${tag}&&id=${this.id}`})
    }
  },
  onShareAppMessage(){
    return {
    title: '汉唐必方在线商城',
    desc:'',
  }
  },
  onShow(){
    this.num=1;//清空选择商品的数量
    this.showModal=false//显示弹出层
    this.buyNow=false//显示加入购物车还是立即购买按钮
    this.classifyIndex=-1,//规格索引
    this.classifyId=''//规格id
  }
  
}
</script>

<style scoped lang="scss">
@import "../../common/css/mixin";
.scrollForbidden{
  overflow: hidden;/*有弹出层时禁止下层滑动*/
}
/* 头部 */
.goodsDetail{
  width:100%;
  height: 100%;
  background:#eee;
}
  .name_wrapper{
    padding:10px;
    background: #fff;
  }
  .name{
    @include ellipsis(2);
    line-height: 40rpx;
    max-height: 80rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
  .desc{
    padding: 10rpx 0;
    .price{
      font-size: 26rpx;
      color: #e12317;
      line-height: 70rpx;
      .s-price{
        font-size: 46rpx;
      }
    }
    .bottom{
      font-size: 26rpx;
      color: #5c5c5c;
      @include flex(flex-start);
      line-height: 50rpx;
      .m-price{
        text-decoration: line-through;
        margin-right: 30rpx;
      }
    }
  }

  .service{
    background: #ffffff;
    margin-top: 1rpx;
    padding:15px 10px;
    @include flex(flex-start);
    flex-direction: row;
    .service-item{
      margin-right: 30rpx;
      img{
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
        vertical-align: middle;
      }
      span{
        font-size: 24rpx;
        color: #5c5c5c;
        line-height: 30rpx;
      }
    }
  }
  /* 中间详情 */
  .goods_desc{
    width:100%;
    margin-top:10px;
    padding-bottom: 100rpx;
  }
  .goods_desc_item{
    background: #fff;
    display: flex;
    height:40px;
    align-items: center;
    margin-bottom:10px;
    padding: 5px 10px;
  }
  
  .goods_desc_item img{
    width:20px;
    height:20px;
  }
  .list_item_arrow{
    flex:1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .desc-nav{
    width: 100%;
    background: #ffffff;
    border-bottom: 2rpx solid #eeeeee;
    @include flex(flex-start);
    flex-direction: row;
    .nav-item{
      width: 50%;
      font-size: 30rpx;
      color: #5c5c5c;
      line-height: 100rpx;
      height: 100rpx;
      text-align: center;
      .active{
        line-height: 100rpx;
        height: 100rpx;
        color: #e12317;
        border-bottom: 1rpx solid #e12317;
        display: inline-block;
      }
    }
  }

/* 评论列 */
  .comment{
    width:calc(100% - 20px);
    background:#fff;
    padding: 10px 10px 50px 10px;
  }
  .comment_item{
    padding:5px 0;
    border-bottom: 1px solid #eee;
    color:rgb(63, 60, 60);
    font-size:14px;
  }
  .comment_item_top{
    @include flex(flex-start);
    flex-direction: row;
    /*margin-bottom: 10px;*/
  }
  .comment_item_img{
    width: 80rpx;
    height: 80rpx;
    border-radius: 360rpx;
    overflow: hidden;
    margin-right: 10rpx;
  }
  .comment_item_nick{
    line-height: 80rpx;
    height: 80rpx;
  }
  .comment_item_content{
    padding: 10rpx 0 10rpx 100rpx;
    line-height: 40rpx;
  }
  .comment_item_time{
    text-align: right;
    font-size: 28rpx;
    color: #5c5c5c;
  }
  .comment_btn{
    /*margin-top:10px;*/
    padding:10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1rpx solid #eeeeee;
  }
  .comment_btn_all,.comment_btn_pic{
    width:40%;
    height:30px;
    line-height: 30px;
    padding:2.5px 5px;
    text-align: center;
    border-radius: 5px;
    border:1px solid gray;
  }

  /* 商品介绍 */
  .goods_introduce{
    background: #fff;
    width:calc(100% - 20px);
    padding: 10px 10px 50px 10px;
  }
  /*.goods_introduce>div:nth-child(1){*/
  /*  margin-top:5px;*/
  /*  margin-left: 10px;*/
  /*}*/
  /*.goods_introduce>div:nth-child(2){*/
  /*  margin-top:5px;*/
  /*  margin-left: 10px;*/
  /*  color:red;*/
  /*  margin-bottom:20px;*/
  /*}*/
  /*.goods_introduce>img{*/
  /*  width:100%;*/
  /*  height: auto;*/
  /*  display: block;*/
  /*}*/


  /* 底部购物栏 */
  .cartBar{
    width:100%;
    height:45px;
    display: flex;
    position: fixed;
    bottom:0;
    background:#fff;
  }
  .cartBar_left,.cartBar_right{
    flex:1;
    display: flex;
  }
  .cartBar_left_item{
    display:flex;
    flex:1;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }
  .cartBar_left_item>img{
    width:20px;
    height: 20px;
  }
  .cartBar_right{
    display:flex;
    line-height: 45px;
    text-align: center;
    color:#fff;
  }
  .cartBar_right>div{
    flex:1;
  }
  .cartBar_right>div:nth-child(1){
    background:orange;
  }
  .cartBar_right>div:nth-child(2){
    background:red;
  }
  .cartIcon_wrapper{
    position: relative;
  }
  .cartIcon{
    position: absolute;
    background:red;
    right:20px;
    width:20px;
    height: 20px;
    line-height: 20px;
    color:#fff;
    text-align: center;
    border-radius: 50%;
    top:-5px;
  }



  /* 弹出框 */
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
}
 
.modalDlg{
    width: 100%;
    height:45%;
    position: fixed;
    bottom:0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
}

.modalDlg_top{
  padding:5px;
  padding-right:25px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  
}
.modalDlg_top>img{
  width:80px;
  height: 80px;
}
.modalDlg_top_right{
  margin-left:20px;
  width:200px;
}
.modalDlg_top_right_name{
  display: flex;
  align-items: center
}
.modalDlg_top_right_name_tag{
  color:purple;
  display: inline-block;
  width:50px;
  text-align: center;
  border:1px solid purple;
  font-size: 10px;
  border-radius: 5px;
  margin-right:5px;
}
.modalDlg_top_right_name_tag+span{
  width:200px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} 
.modalDlo_bottom{
  margin-left:5px;
}
.cart_price{
  margin-top:15px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.cart_price>span:nth-child(1){
  color:red;
}

.modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
  width:100%;
}
.modalDlo_center_classify{
  display:flex;
  align-items: center;
  flex-wrap:wrap;
  margin:10px 0;
  padding-bottom: 20px;
}
.modalDlo_center_classify>div{
  border:1px solid #eee;
  padding:2.5px 5px;
  border-radius: 5px;
  margin-left:5px;
  text-align: center;
}
.modalDlo_center_tit{
  padding-left:10px;
}
.join_cart{
  width:100%;
  background: rgb(196, 75, 75);
  color:#fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  bottom:0;
}
button::after {
  border: none;
}
button {
  background-color: #fff;
  line-height: 16px;
  font-size: 10px;
  border-radius:0;
}
.comment_item_pic{
    display:flex;
  }
  .comment_item_pic>img{
    width:80px;
    height: 80px;
    margin-right: 10px;
  }
  .comment-active{
    background: red;
    color: #ffffff;
    border: none;
  }
  /* 规格 */
  .selectClassify{
    border:red 1px solid !important;
    color:red;
  }
</style>
